<template>
    <div class="root">
        <div v-show="showtop" :class="{top}">
            <i class="iconfont icon-arrow-left back" @click="goback">&lt;</i>
            {{info.name}}
        </div>
        <div class="img">
            <i class="iconfont icon-arrow-left back" @click="goback">&lt;</i>
            <img :src="info.poster" width="100%" height="201">
        </div>
        <div class="detail">
            <div class="title">{{info.name}}<span>{{info.item.name}}</span><i>{{info.grade}}分</i></div>
            <div class="category">{{info.category | splitCat}}</div>
            <div class="time">{{info.premiereAt | formatDate}}上映</div>
            <div class="nation">{{info.nation}} | {{info.runtime}}分钟</div>
            <div :class="{synopsis, normal: true}">{{info.synopsis}}</div>
            <div class="toggle" @click="toggle"><i :class="{iconfont: true,'icon-xiajiantou': xia, 'icon-xiangshangjiantou': shang}"></i></div>
        </div>
        <div class="actors">
            <h4>演职人员</h4>
            <div>
                <div class="swiper mySwiper actor">
                    <div class="swiper-wrapper">
                        <div v-for="item in info.actors" :key="item.name" class="swiper-slide">
                            <img :src="item.avatarAddress" width="85" />
                            <p>{{item.name}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="still">
            <h4>剧照</h4>
            <div>
                <div class="swiper mySwiper lunbo" v-show="info.photos">
                    <div class="swiper-wrapper">
                        <div v-for="(item, index) in info.photos" :key="index" class="swiper-slide">
                            <img :src="item" width="150" />
                        </div>
                    </div>
                </div>
                <div class="none" v-show="!info.photos">
                    暂无电影剧照
                </div>
            </div>
        </div>
        <div class="submitbtn">选座购票</div>
    </div>
</template>

<script>
import { FilmInfo } from "@/request/request"
import "swiper/swiper-bundle.min.css"
import Swiper from 'swiper'

export default {
    filters: {
        formatDate(val){
            let date = new Date(val*1000)
            let year = date.getFullYear();
            let month = date.getMonth()
            let day = date.getDate()
            return year + '-' + month + '-' + day
        },
        splitCat(val){
            let arr = val.split('|')
            return arr.join(' | ')
        }
    },
    mounted(){
        let b = new Swiper(".actor", {
            slidesPerView: 3,
            spaceBetween: 30,
        });
        let a = new Swiper(".lunbo", {
            slidesPerView: 2,
            spaceBetween: 20,
        });
        // console.log(a, b);
        // this.$store.commit('hideFooter')

        window.addEventListener('scroll', () => {
            let scrollTop = document.documentElement.scrollTop;
            if(scrollTop>=44){
                this.showtop = true
            }else{
                this.showtop = false
            }
        })
    },
    created(){
        let id = this.$route.query.id
        FilmInfo(id).then(res =>{
            this.info = res.data.film
            // console.log(this.info)
        })
    },
    // beforeDestroy(){
    //     this.$store.commit('showFooter')
    // },
    data () {
        return {
            info: {
                item: {
                    name: '2d'
                },
                category: 'a|b',
            },
            synopsis: true,
            xia: true,
            shang: false,
            top: true,
            showtop: false
        }
    },
    methods: {
        toggle(){
            this.synopsis = !this.synopsis
            this.xia = !this.xia
            this.shang = !this.shang
        },
        goback(){
            console.log(66);
            // let path = this.$route.query.url
            // console.log(path);
            // return
            // this.$router.push(path)
            this.$router.back()
        }
    }
}
</script>

<style scoped>
    .root{
        padding-bottom: 50px !important;
    }
    .still img{
        width: 170px;
        height: 130px;
        
    }
    .top{
        font-size: 17px;
        line-height: 44px;
        width: 100%;
        height: 44px;
        background-color: #fff;
        text-align: center;
        position:fixed;
        top: 0;
        left: -20px;
        border-bottom:1px solid #eee;
        z-index:10;
        margin:0 20px;
    }
    .top .back{
        position:absolute;
        left: 20px;
        top: 0;
    }
    .root{
        padding:0 20px;
    }
    .img{
        position:relative;
        margin:0 -20px;
    }
    .img .back{
        position:absolute;
        left: 10px;
        top: 10px;
        background-color: rgba(255,255,255,.5);
        width: 30px;
        height: 30px;
        border-radius:50%;
        text-align: center;
        line-height: 30px;
    }
    .actors{
        width: 100%;
    }
    .actor .swiper-slide{
        text-align: center;
    }
    .detail .title{
        color: #191a1b;
        font-size: 18px;
        height: 24px;
        line-height: 24px;
        font-weight: normal;
        position:relative;
        margin-top:12px;
    }
    .detail .title span{
        font-size: 9px;
        color: #fff;
        background-color: #d2d6dc;
        height: 14px;
        line-height: 14px;
        padding: 0 2px;
        border-radius: 2px;
        display: inline-block;
        margin-left: 7px;
    }
    .detail .title i{
        font-weight: normal;
        position:absolute;
        right: 0;
        top: 0;
        color:#ffb632;
    }
    .detail .category,.detail .time, .detail .nation, .detail .normal{
        font-size: 13px;
        color: #797d82;
        margin-top: 4px;
        transition: all 2s;
    }
    .detail .synopsis{
        height:36px;
        overflow: hidden;
    }
    .detail .toggle{
        text-align: center;
        font-size: 12px;
        color:#ccc;
    }
    .still .none{
        height: 115px;
        color:#ccc;
        text-align: center;
        line-height: 115px;
    }
    .submitbtn{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 49px;
        width: 100%;
        text-align: center;
        background-color: #ff5f16;
        color: #fff;
        font-size: 16px;
        line-height: 49px;
        z-index:5;
    }
</style>
